<template>
    <div class="bos">
        <Head title="美酒+咖啡">
  <img src="../../../../../assets/5.png" alt="">
 </Head>

 <div class="bottom">
  <div class="xiao"  >
 <div class="left">
  {{ num }}.
 </div>
 <div class="zhong">
    {{text}}
 </div>
</div> 
 </div>
 <router-view></router-view>

 
      </div>
  </template>
  
  <script>
  
import Head from "@/components/public/HeadPage.vue"
  export default {
    data(){
    return{
     text:sessionStorage.getItem("coffeetitle"),
     num:sessionStorage.getItem("i")
   }
  },
    components:{
   Head
   },
  }
  </script>
  
  <style scoped>
 .box{
  width: 100%;
  height: 100%;
}
/* 图标区域 */
.top h3 img {
    width: 0.24rem;
    margin-right: 0.05rem;
}

.bottom{
  width: 100%;
  height: .35rem;
  display: flex;
  justify-content: center;

}

.xiao{
  width: 100%;
  margin-top: .05rem;
 display: flex;
 border-bottom: 2px solid #dad9df;

  
}
.xiao .left{
      width: 5%;
      height: .3rem;
      margin-left: .1rem;
      font-weight: 700;
      text-align: center;
      line-height: .3rem;
    }
    .zhong{
      width: 95%;
      height: 100%;
      line-height: .3rem;
      padding-left: 5px;
     font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    /* 内容区域 */
    .context{
        width: 100%;
        height: 6rem;
        display: flex;
      justify-content: center;
      background-color: #f0eff5;
    }
    .center{
    width: 98%;
    text-align: center;
    font-weight: 700;
    line-height: .35rem;
  
}
.xi{
  width: 100%;
  margin-top: .05rem;
 display: flex;  
}
    .xi .yuan{
      width: 0.16rem;
    height: 0.16rem;
    margin-left: 0.1rem;
    font-weight: 700;
    text-align: center;
    line-height: .16rem;
    border-radius: 50%;
    margin-top: 0.05rem;
    border: 1px solid black;
    }
  
    /* 中间区域 */
    .xi .zho{

      height: 100%;
      line-height: .3rem;
      padding-left: 5px;
     font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  </style>